<!DOCTYPE html>
<html>
<head>
<title>Web Components Examples: Entry Helper</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700|Droid+Sans+Mono|Ovo" type="text/css">
<link rel="stylesheet" href="../assets/styles/main.css" type="text/css">
<link rel="stylesheet" href="../assets/styles/prettify.css" type="text/css" />
<script src="../assets/scripts/bug-assist.js"></script>
<script src="../assets/scripts/prettify.js"></script>
<meta name="bug.blocked" content="14956">
<meta name="bug.short_desc" content="[Samples]: ">
<meta name="bug.product" content="WebAppsWG">
<meta name="bug.component" content="Component Model">
</head>
<body>
<header>
<ul>
    <li><a href="../samples/index.html">Samples</a></li>
    <li><a href="../explainer/index.html">Explainer</a></li>
    <li><a href="../spec/shadow/index.html">Shadow DOM Spec</a></li>
    <li><a href="../spec/templates/index.html">HTML Templates</a></li>
</ul>
<h2>Web Components Example</h2>
<h1>Entry Helper</h1>
</header>
<pre class="prettyprint"><code>
&lt;element extends=&quot;input&quot; name=&quot;x-entry-helper&quot;&gt;
    &lt;script&gt;
        this.lifecycle({
            create: function(shadowRoot) {
                if (this.type != &#x27;text&#x27;)
                    return;
                this._options = shadowRoot.querySelector(&#x27;ul&#x27;);
                this.setAttribute(&#x27;autocomplete&#x27;, &#x27;off&#x27;);
                document.addEventListemer(&#x27;keydown&#x27;, this._handleKeyDownEvent);
                document.addEventListener(&#x27;mouseup&#x27;, this._handleMouseUpEvent);
            }
        });

        var Helper = this.generatedConstructor;
        Helper.prototype._handleKeyDownEvent = function(evt)
        {
            if (evt.currentTarget.parentNode == this._options) {
                this._selectOption(evt.currentTarget);
            } else if (evt.currentTarget == this) {
                if (!this._open)
                    this.open();
                this.populate();
            // ...
            } else {
                this.close();
            }
        }

        Helper.prototype._handleMouseUpEvent = function(evt)
        {
            if (evt.currentTarget == this) {
            // ...
            } else {
                this.close();
            }
        }

        Helper.prototype._settingsChanged = function()
        {
            if (!this._open)
                return;

            this.populate();
        }

        Helper.prototype.clear = function()
        {
            // clear helper window&#x27;s contents.
        }

        Helper.prototype.populate = function()
        {
            this.clear();
            // populate helper window using current settings.
        }

        Helper.prototype.open = function()
        {
            if (this._open)
                return;
            else
                this._options.style.display = &#x27;&#x27;;

            // Show entry helper window and attempt completion match.
            // ..

            this._open = true;
            this.dispatchEvent(new Event(&#x27;helperopen&#x27;));
        }

        Helper.prototype.close = function()
        {
            // close entry helper.
        }

        this.reflectAttribute(&#x27;x-highlight-matches&#x27;, &#x27;highlightMatches&#x27;, Helper.prototype._settingsChanged);
        this.reflectAttribute(&#x27;list&#x27;, &#x27;list&#x27;, Helper.prototype._settingsChanged);
        this.setupEvent(&#x27;helperopen&#x27;);
    &lt;/script&gt;
    &lt;template&gt;
        &lt;style scoped&gt;
            ul {
                width: 200px;
                height: 200px;
                position: absolute;
                /* ... */
            }
            /* ... */
        &lt;/style&gt;
        &lt;div&gt;
            &lt;shadow&gt;&lt;/shadow&gt;
            &lt;ul&gt;&lt;/ul&gt;
        &lt;/div&gt;
    &lt;/template&gt;
&lt;/element&gt;
</code></pre>
</body>
</html>